<template>
    <div class="banner">
        <el-carousel height="400px"
        >
            <el-carousel-item v-for="banner in banner_list" :key="banner.title">
                <router-link :to="banner.link">
                    <img :src="banner.image" alt="" :title="banner.title">
                </router-link>
            </el-carousel-item>
        </el-carousel>
        <div class="w1180">
            <div id="sidebar">
                <div class="quick-order" id="long_rental">
                    <h3 class="title-top clear_float" style="margin-top: 0px">
                        <span class="current">自驾租车</span>
                    </h3>
                    <div class="form-box" style="display: block;">
                        <!--取车部分-->
                        <div class="comm-formbox">
                            <div class="side-bt clear_float">
                                <div class="side-title">取车:</div>
                                <div class="side-door" id="city_get">
                                </div>
                            </div>
                            <div class="side-info clear_float">
                                <div class="side-city">
                                    <ul class="taad">
                                        <li id="getcitybox">
                                            <input name="getCarCity" id="getCarCity" class="input-city  input-bdno"
                                                   autocomplete="off" value="上海" type="text" maxlength="30">
                                        </li>
                                        <li>
                                            <div class="mendianGet">
                                                <div id="getMendianBox">
                                                    <input name="getCarCityMenDian" id="getCarCityMenDian" type="text"
                                                           placeholder="请输入取车营业门店" v-model="word1" class="input-store"
                                                           autocomplete="off">
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="side-time">
                                    <!--预订框时间部分 s-->
                                    <table id="book_StartCldDate_table" cellpadding="0" cellspacing="0" border="1">
                                        <tbody>
                                        <tr id="book_StartCldDate_fromdate">
                                            <td>
                                                <el-date-picker
                                                        v-model="value1"
                                                        type="date"
                                                        placeholder="取车日期"
                                                        style="width: 150px"
                                                        value-format="yyyy-MM-dd"
                                                >
                                                </el-date-picker>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--还车部分-->
                        <div class="comm-formbox">
                            <div class="side-bt clear_float">
                                <div class="side-title">还车:</div>
                                <div class="side-door" id="city_get">
                                </div>
                            </div>
                            <div class="side-info clear_float">
                                <div class="side-city">
                                    <ul class="taad">
                                        <li id="getcitybox">
                                            <input name="getCarCity" id="getCarCity" class="input-city  input-bdno"
                                                   autocomplete="off" value="上海" type="text" maxlength="30">
                                        </li>
                                        <li>
                                            <div class="mendianGet">
                                                <div id="getMendianBox">
                                                    <input name="getCarCityMenDian" id="getCarCityMenDian" type="text"
                                                           placeholder="请输入取车营业门店" v-model="word2" class="input-store"
                                                           autocomplete="off">
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="side-time">
                                    <!--预订框时间部分 s-->
                                    <table id="book_StartCldDate_table" cellpadding="0" cellspacing="0" border="1">
                                        <tbody>
                                        <tr id="book_StartCldDate_fromdate">
                                            <td>
                                                <el-date-picker
                                                        v-model="value2"
                                                        type="date"
                                                        placeholder="还车日期"
                                                        style="width: 150px"
                                                        value-format="yyyy-MM-dd"
                                                >
                                                </el-date-picker>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="btn-home inp">
                            <button id="btnSubmit" style="font-size: 20px;color: white"
                                    @click="choice_car(word1, value1, value2)">立即选车
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-row>
            <el-col :span="16">
                <div class="grid-content bg-purple" style="text-align:left">
                    <h2>营业网点</h2>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-container>
            <el-aside width="848px">
                <baidu-map class="map" :center="{lng: 121.237, lat: 31.035}" :zoom="15">
                    <bm-marker :position="{lng: 121.237, lat: 31.035}" :dragging="true" @click="infoWindowOpen"
                               :icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}">
                        <bm-info-window class="show_store" :show="show" @close="infoWindowClose" @open="infoWindowOpen">
                            松江店
                        </bm-info-window>
                    </bm-marker>
                </baidu-map>
            </el-aside>
            <el-main>
                <router-link to="/self_drive"><h3 style="text-align: center">松江店</h3></router-link>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">门店电话：021-37698020</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">营业时间：08:00-21:00</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">门店地址：上海市松江区通跃路29号</div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: [],
                value1: '',
                value2: '',
                show: false,
                word1: '',
                word2: '',
            };

        },
        methods: {
            infoWindowClose() {
                this.show = false
            },
            infoWindowOpen() {
                this.show = true
            },
            choice_car(word, date1, data) {
                if (!word) {
                    word = this.word1
                }
                if (!date1) {
                    date1 = this.value1
                }
                if (!data) {
                    data = this.value2
                }
                let aDate, oDate1, oDate2, iDays;
                aDate = date1.split("-");
                oDate1 = new Date(aDate[0], aDate[1], aDate[2]);
                aDate = data.split("-");
                oDate2 = new Date(aDate[0], aDate[1], aDate[2]);
                if ((oDate2 - oDate1) < 0) {
                    this.$message({
                        message: '日期输入有误',
                        type: 'warning',
                        duration: 1000,
                    })
                }
                else {
                    iDays = parseInt(Math.abs(oDate2 - oDate1) / 1000 / 60 / 60 / 24);
                    console.log(word, date1, data, iDays, oDate2 - oDate1);
                    this.$router.push(`/self_drive?store=${word}&date=${iDays}&value1=${date1}&value2=${data}`);
                }
                this.word1='';
                this.word2='';
                this.value1='';
                this.value2='';

            }
        },
        created() {
            // this.$axios({
            //     url: this.$settings.base_url + '/home/banners',
            // });
            this.$axios.get(this.$settings.base_url + '/home/banners').then(response => {
                this.banner_list = response.data;
            })
        },

    }


</script>

<style scoped>

    .banner {
        height: 1400px;
    }

    .banner img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }

    .w1180 {
        width: 1180px;
        margin: 0 auto;
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
        margin: 0;
        padding: 0;
    }

    div {
        display: block;
    }

    #sidebar {
        width: 566px;
        height: 308px;
        position: absolute;
        margin-top: -343px;
        z-index: 10;
        box-shadow: #333 1px 1px 10px;
    }

    fieldset, img, input, button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    input {
        outline: none;
    }

    button, input, select, textarea {
        font-size: 100%;
    }

    .quick-order {
        width: 566px;
        height: 308px;
        background: #fff;
    }

    .title-top {
        width: 122px;
        height: 308px;
        background: #f2f2f2;
        float: left;
    }

    .clear_float {
        zoom: 1;
    }

    .clear_float:after {
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
        content: "";
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }

    .title-top span.current {
        border-left-color: #23b7b7;
        background: #fff;
        color: #23b7b7;
    }

    .title-top span {
        width: 123px;
        text-align: center;
        border-left: 7px solid #f2f2f2;
        padding: 20px 0;
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .form-box {
        width: 390px;
        height: 308px;
        float: right;
        margin-right: 28px;
    }

    .side-bt {
        margin-top: 20px;
    }

    .side-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        float: left;
    }

    .side-door {
        float: right;
    }

    .side-door input {
        width: 13px;
        height: 13px;
        vertical-align: -2px;
        *vertical-align: 0;
        margin-right: 2px;
        cursor: pointer;
    }

    fieldset, img, input, button {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    button, input, select, textarea {
        font-size: 100%;
    }

    .side-info {
        padding-top: 0;
    }

    .clear_float {
        zoom: 1;
    }

    .side-city {
        width: 182px;
        float: left;
    }

    ul, li, ol {
        list-style: none;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    .input-city, .input-store {
        width: 168px;
        font-size: 14px;
        padding: 0 6px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #e7e7e7;
        color: #333;
        background: url(https://www.1hai.cn/content/Index/Images/arrow_down.png) no-repeat #fff 164px 13px;
    }

    .side-time {
        width: 170px;
        height: 60px;
        margin-top: 10px;
        float: right;
    }

    .ydcity-box {
        position: absolute;
        margin-top: 5px;
        top: -1px;
        left: -1px;
        z-index: 1;
        width: 325px !important;
        background: #fff;
        border: solid 1px #23b7b7;
        overflow: hidden;
        display: none;
    }

    .ydcity-box .wrap-title {
        width: 325px !important;
        overflow: hidden;
    }

    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }

    .ydcity-box .wrap-title ul li {
        background: #e4f9f9 !important;
        color: #333 !important;
        font-weight: normal !important;
        line-height: 30px;
    }

    .ydcity-box .list-type {
        width: 310px;
        height: 32px;
        line-height: 30px;
        padding: 5px;
        overflow: hidden;
        zoom: 1;
    }

    .ydcity-box .wrap-title ul.tabHF-title li {
        background: #fff !important;
    }

    .ydcity-box .list-type li.current {
        color: #23b7b7 !important;
        height: 30px;
        font-weight: bolder !important;
        border-bottom: 2px solid #23b7b7;
        background: #fff;
    }

    .ydcity-box .list-type li {
        float: left;
        width: 51px;
        text-align: center;
        border-bottom: 2px solid #999;
        color: #333;
        cursor: pointer;
    }

    .ydcity-box .list-city {
        overflow: hidden;
    }

    .ydcity-box .list-city li.current {
        display: block;
    }

    .ydcity-box .list-city li {
        color: #555;
        display: none;
    }

    .ydcity-box .list-city li .inner-box {
        padding-bottom: 12px;
        overflow: hidden;
    }

    .ydcity-box .list-city li dl {
        overflow: hidden;
        zoom: 1;
    }

    .ydcity-box .list-city li dl dd {
        float: left;
        margin: 10px 0 0 12px;
        width: 68px;
        display: inline;
    }

    dd {
        display: block;
        margin-inline-start: 40px;
    }

    .ydcity-box .list-city li dl dd span.hover {
        color: #fff;
        background-color: #23b7b7;
    }

    .ydcity-box .list-city li dl dd span {
        padding: 2px 5px;
        display: inline-block;
        cursor: pointer;
    }

    .el-aside {
        background-color: white;
        color: #333;
        text-align: center;
        line-height: 400px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-row {
        margin-top: 100px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }
    .el-col {
        border-radius: 4px;
    }

    #btnSubmit {
        font-size: 10px;
        color: red;
        text-align: center;
    }

    .bg-purple-dark {
        background: white;
    }

    .bg-purple {
        background: white;
    }

    .bg-purple-light {
        background: white;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 70px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: white;
    }

    .map {
        width: 100%;
        height: 600px;
    }

    .btn-home {
        text-align: center;
        margin-top: 15px;
        font-size: 20px;
    }

    .btn-home button {
        width: 388px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        border: none;
        font-size: 22px;
        background: #e8591d;
        color: #fff;
        cursor: pointer;
    }

</style>
